<template>
	<el-dialog title="编号编辑" class="el-dialog" v-model="isShowDialog" width="550px" align="center">
		<el-card shadow="hover" body-style="padding:8px; ">
			<div class="system-num-edit-container">
				<el-form :inline="false" :model="formInline" size="mini">
					<el-form-item label-width="100px" label="区划编号">
						<el-input v-model="formInline.areaCode" placeholder="请输入..."></el-input>
					</el-form-item>
					<el-form-item label-width="100px" label="单位">
						<el-select filterable v-model="formInline.organId" style="width: 50%" placeholder="请选择...">
							<el-option v-for="item in organs" :key="item.value" :label="item.label" :value="item.value"> </el-option>
						</el-select>
					</el-form-item>
					<el-form-item label-width="100px" label="编号类别">
						<el-select filterable v-model="formInline.numberId" style="width: 50%" placeholder="请选择...">
							<el-option v-for="item in bhlbs" :key="item.value" :label="item.label" :value="item.value"> </el-option>
						</el-select>
					</el-form-item>
					<el-form-item label-width="100px" label="时间标识">
						<el-input v-model="formInline.dateForamt" placeholder="请输入..."></el-input>
					</el-form-item>
					<el-form-item label-width="100px" label="自增长度">
						<el-input v-model="formInline.inc" placeholder="请输入..."></el-input>
					</el-form-item>
					<el-form-item label-width="100px" label="编号组成">
						<el-input v-model="formInline.numberFormat" placeholder="请输入..."></el-input>
					</el-form-item>
					<el-form-item label-width="100px" label="备注">
						<el-input v-model="formInline.remark" type="textarea" placeholder="请输入..."></el-input>
					</el-form-item>
				</el-form>
			</div>
		</el-card>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="onCancel" size="small">取 消</el-button>
				<el-button type="primary" @click="onSave" size="small">保 存</el-button>
			</span>
		</template>
	</el-dialog>
</template>
<script lang="ts">
import { reactive, toRefs, nextTick } from 'vue';
import { queryDicsToCode } from '/@/api/dic/index';
import { queryOrgans } from '/@/api/organ/index';
import { saveNumber } from '/@/api/number/index';
import { ElMessage } from 'element-plus';
export default {
	components: {},
	props: [],
	emits: ['reload'],
	setup(props, { emit }) {
		const state = reactive({
			dic: {},
			organ: {},
			isShowDialog: false,
			bhlbs: [{ label: '', value: '' }],
			organs: [{ label: '', value: '' }],
			formInline: {
				areaCode: '',
				numberId: '',
				dateForamt: 'yyyyMMdd',
				inc: '0000',
				numberFormat: '',
				organId: '',
				id: 0,
				numberName: '',
				numberCode: '',
				organName: '',
				remark: '',
			},
		});
		// 打开弹窗
		const openDialog = (data) => {
			Object.keys(state.formInline).forEach((key) => (state.formInline[key] = ''));
			state.formInline.inc = '0000';
			state.formInline.dateForamt = 'yyyyMMdd';
			state.isShowDialog = true;
			if (!data.isAdd) {
				Object.assign(state.formInline, data.data);
			}
		};
		// 关闭弹窗
		const closeDialog = () => {
			state.isShowDialog = false;
		};
		// 取消
		const onCancel = () => {
			closeDialog();
		};
		async function onSave() {
			await nextTick(() => {
				const bh = state.dic.data.find((x) => x.id == state.formInline.numberId) as any;
				const jg = state.organs.find((x) => x.value == state.formInline.organId) as any;
				state.formInline.numberName = bh?.name;
				state.formInline.numberCode = bh?.code;
				state.formInline.organName = jg?.label;
				saveNumber(state.formInline).then((res) => {
					if (res.success) {
						state.isShowDialog = false;
						emit('reload');
						ElMessage({ message: '操作成功', type: 'success' });
					}
				});
			});
		}
		(function () {
			Promise.all([queryOrgans({ PageSize: 1000 }), queryDicsToCode('BHLB')]).then((datas: any) => {
				state.dic = datas[1];
				state.organ = datas[0];
				state.bhlbs = state.dic.data.map((x: any) => {
					return { label: x.name, value: x.id };
				});
				state.organs = state.organ.data.data.map((x: any) => {
					return { label: x.name, value: x.id };
				});
			});
		})();
		return {
			openDialog,
			onCancel,
			onSave,
			...toRefs(state),
		};
	},
};
</script>
